<template>
  <div class="warpc">
    <div class="assess">
      <div class="oneline">
        <div class="onelinef"></div>
        <!-- <van-icon name="arrow" /> -->
      </div>
      <div class="content">
        <div>包装精美(11)</div>
        <div>高大上(12)</div>
        <div>质量好(8)</div>
        <div>款式丰富(7)</div>
        <div>服务热情(66)</div>
        <div>性价比高(10)</div>
      </div>
      <div class="pjcont">
        <div class="left">
          <img src="yangchao/imgs/1.1.jpg" alt />
        </div>
        <div class="right">
          <div class="pjname">meteora52</div>
          <div class="data">发布于9月2日</div>
          <div class="startdf">
            打分
            <img class="start" src="yangchao/imgs/xingxin.png" alt />
            <img class="start" src="yangchao/imgs/xingxin.png" alt />
            <img class="start" src="yangchao/imgs/xingxin.png" alt />
            <img class="start" src="yangchao/imgs/xingxin.png" alt />
            <img class="start" src="yangchao/imgs/xingxin.png" alt />
          </div>
          <p class="page">他们家的话简直太好看了，我算是第一次在网上订花，看了他们家的图片，觉得搭配什么都还不错.然后跟老板沟通...</p>
          <div class="pjpic">
            <img src="yangchao/imgs/1.4.jpg" alt />
            <img src="yangchao/imgs/1.2.jpg" alt />
            <!-- <img :src="obj.t4" alt="" /> -->
            <!-- <img :src="obj.t3" alt="" /> -->
          </div>
        </div>
      </div>
      <div class="pjcont">
        <div class="left">
          <img src="yangchao/imgs/1.2.jpg" alt />
        </div>
        <div class="right">
          <div class="pjname">Someone热成怂</div>
          <div class="data">发布于9月13日</div>
          <div class="startdf">
            打分
            <img class="start" src="yangchao/imgs/xingxin.png" alt />
            <img class="start" src="yangchao/imgs/xingxin.png" alt />
            <img class="start" src="yangchao/imgs/xingxin.png" alt />
            <img class="start" src="yangchao/imgs/xingxin.png" alt />
            <img class="start" src="yangchao/imgs/xingxin.png" alt />
          </div>
          <p class="page">老顾客了，鲜花一如既往的好看包装精美，花的品质优良、鲜活，有图有真相哦，推荐推荐，老板老板服务态度好，有耐心...</p>
          <div class="pjpic">
            <img src="yangchao/imgs/pingjia1.jpg" alt />
            <img src="yangchao/imgs/pingjia2.jpg" alt />
            <img src="yangchao/imgs/pingjia3.jpg" alt />
            <!-- <img :src="obj.t4" alt="" /> -->
            <!-- <img :src="obj.t3" alt="" /> -->
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="us" @click="funus()">
        <div class="oneline">
          <div @click="ask()" class="onelinef">问大家（6）</div>
          <van-icon name="arrow" />
        </div>
        <div class="tw">
          <div class="ask">
            <div class="askle">
              <span class="ques">问</span>
              <span class="conask">请问一下花可以保持多久不干枯呢？</span>
            </div>
            <span class="askre">9 个回答</span>
          </div>
          <div class="ask">
            <div class="askle">
              <span class="ques">问</span>
              <span class="conask">送爱人的花可以选择哪一朵呢？有推荐吗？</span>
            </div>
            <span class="askre">5 个回答</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      obj: []
    };
  },
  methods: {
    funus() {
      this.$router.push("/yccask");
    }
    // ask(){
    //     this.$router.push("/yccask")
    // }
  },
  created() {
    let i = this.$route.query.i;
    axios.request("http://localhost:8889/shoplistCK").then(({ data }) => {
      this.obj = data[i];
    });
  }
};
</script>

<style scoped lang="scss" >
.warpc {
  width: 100%;
  .assess {
    margin-top: 3.733vw;
    line-height: 6.4vw;
    width: 94.667vw;
    margin: auto;
    // background: green;
    .oneline {
      margin-top: 3.733vw;

      display: flex;
      justify-content: space-between;
      .onelinef {
        font-size: 3.733vw;
        font-weight: 700;
      }
    }
    .content {
      margin-top: 24vw;
      margin-top: 29.267vw;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      div {
        text-align: center;
        width: 31%;
        background-color: #eee;
        font-size: 2.667vw;
        line-height: 5.333vw;
        margin-bottom: 2.133vw;
        border-radius: 2.333vw;
      }
      .cp {
        border: 0.267vw solid #6683c7;
        color: #6683c7;
      }
    }
    .pjcont {
      display: flex;
      justify-content: space-around;
      padding-bottom: 2.133vw;
      border-bottom: 0.267vw solid #f7f7f7;
    }
    .left {
      img {
        width: 10.667vw;
        border-radius: 50%;
      }
    }
    .right {
      margin-left: 1.6vw;
      font-size: 2.667vw;
      .pjname {
        color: #899396;
      }
      .data {
        color: #999999;
      }
      .startdf {
        img {
          width: 3.733vw;
          vertical-align: middle;
        }
      }
      .page {
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .pjpic {
        margin-top: 2.667vw;
        img {
          width: 26.667vw;
        }
      }
    }
    .line {
      width: 100%;
      height: 2.133vw;
      background: #f6f6f6;
    }
    .tw {
      margin-top: 1.333vw;
      .ask {
        font-size: 3.2vw;
        display: flex;
        justify-content: space-between;
        .ques {
          background: #fc6841;
          padding: 0.533vw;
          color: #f6f6f6;
        }
        .conask {
          padding-left: 2.133vw;
        }
        .askre {
          color: #999999;
        }
      }
    }
  }
}
</style>